<template>
  <view class="home-container">
    <!-- 顶部状态栏占位 -->
    <view :style="{ paddingTop: statusBarHeight + 'px' }">
      <!-- 顶部用户栏 -->
      <view class="user-bar">
        <view class="user-info" @click="toUserInfo">
          <image
            v-if="userInfo.avatar_file && userInfo.avatar_file.url"
            class="avatar"
            :src="userInfo.avatar_file.url"
            mode="aspectFill"
          />
          <view v-else class="avatar default-avatar">
            <uni-icons color="#ffffff" type="person-filled" size="32" />
          </view>
          <view class="user-text">
            <text class="hello">你好~{{ userInfo.nickname || userInfo.username || '未登录' }}</text>
            <text class="date">2025/6/25</text>
          </view>
        </view>
       </view>
    </view>

    <!-- 积分福利Banner -->
    <view class="banner">
      <view class="banner-content">
        <text class="banner-title">积分新福利\n好礼兑不停！</text>
        <button class="banner-btn">立即前往</button>
      </view>
      <image class="banner-img" src="/static/image/banner-gift.png" mode="aspectFit" />
    </view>

    <!-- 健康管理区块 -->
    <view class="section-title">健康管理</view>
    <view class="health-grid">
      <view class="health-card score">
        <image class="icon" src="/static/icons/score.png" />
        <text class="score-num">80</text>
        <image class="chart" src="/static/image/line-chart.png" />
        <view class="switch-row">
          <view class="switch on" />
          <view class="switch off" />
          <view class="switch on" />
        </view>
        <text class="card-link">查看更多</text>
      </view>
      <view class="health-card progress">
        <image class="icon" src="/static/icons/progress.png" />
        <view class="progress-circle">
          <text class="progress-num">75%</text>
        </view>
        <text class="card-link">查看更多</text>
      </view>
      <view class="health-card member">
        <image class="icon" src="/static/icons/member.png" />
        <view class="member-avatars">
          <image v-for="i in 3" :key="i" class="member-avatar" :src="'/static/image/robt.png'" />
        </view>
        <text class="card-link">查看更多</text>
      </view>
    </view>

    <!-- 医学百科区块 -->
    <view class="section-title">医学百科</view>
    <view class="encyclopedia-list">
      <view class="encyclopedia-item" v-for="item in encyclopedia" :key="item.title">
        <image class="encyclopedia-img" :src="item.img" />
        <view class="encyclopedia-info">
          <text class="encyclopedia-title">{{ item.title }}</text>
          <text class="encyclopedia-desc">{{ item.desc }}</text>
        </view>
        <uni-icons type="arrow-right" size="20" color="#bbb" />
      </view>
    </view>
  </view>
</template>

<script>
import { store } from '@/uni_modules/uni-id-pages/common/store.js'
export default {
  data() {
    return {
      statusBarHeight: 0,
      encyclopedia: [
        {
          title: '紫苏',
          img: '/static/image/plant1.png',
          desc: '紫苏唇形科，广布中、东、北地。主治风寒感冒、胸闷呕吐、胎动不安等症状。'
        },
        {
          title: '辛夷',
          img: '/static/image/plant2.png',
          desc: '发散风寒，通鼻窍。主治鼻塞流涕，鼻炎，鼻窦炎等症状。'
        }
      ]
    }
  },
  computed: {
    userInfo() {
      return store.userInfo
    },
    hasLogin() {
      return store.hasLogin
    }
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
  },
  methods: {
    toUserInfo() {
      if (!this.hasLogin) {
        uni.navigateTo({
          url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd'
        })
      } else {
        uni.navigateTo({
          url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.home-container {
  background: #f5f8fc;
  min-height: 100vh;
  padding-bottom: 20rpx;
}
.user-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 24rpx 0 24rpx;
}
.user-info {
  display: flex;
  align-items: center;
}
.avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}
.default-avatar {
  background: #a37ce7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-text {
  display: flex;
  flex-direction: column;
}
.hello {
  font-size: 30rpx;
  color: #222;
  font-weight: bold;
}
.date {
  font-size: 22rpx;
  color: #8c8c8c;
  margin-top: 4rpx;
}
.bell-box {
  width: 48rpx;
  height: 48rpx;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.bell {
  width: 32rpx;
  height: 32rpx;
}

.banner {
  margin: 24rpx 24rpx 0 24rpx;
  background: linear-gradient(90deg, #4f8aff 0%, #6fd6ff 100%);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  position: relative;
  overflow: hidden;
}
.banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.banner-title {
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  white-space: pre-line;
}
.banner-btn {
  background: #222;
  color: #fff;
  border-radius: 32rpx;
  font-size: 22rpx;
  padding: 8rpx 32rpx;
  border: none;
  margin-top: 8rpx;
}
.banner-img {
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  right: 24rpx;
  top: 16rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #222;
  margin: 40rpx 24rpx 16rpx 24rpx;
}

.health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20rpx;
  margin: 0 24rpx;
}
.health-card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 180rpx;
  position: relative;
}
.health-card.score {
  grid-row: 1 / span 2;
  grid-column: 1 / 2;
  min-width: 180rpx;
}
.health-card .icon {
  width: 32rpx;
  height: 32rpx;
  margin-bottom: 8rpx;
}
.score-num {
  font-size: 48rpx;
  font-weight: bold;
  color: #4f8aff;
  margin-bottom: 8rpx;
}
.chart {
  width: 100rpx;
  height: 32rpx;
  margin-bottom: 8rpx;
}
.switch-row {
  display: flex;
  gap: 8rpx;
  margin-bottom: 8rpx;
}
.switch {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background: #e0e7ef;
}
.switch.on {
  background: #4f8aff;
}
.card-link {
  color: #4f8aff;
  font-size: 22rpx;
  margin-top: 8rpx;
}
.health-card.progress {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  align-items: center;
  justify-content: center;
}
.progress-circle {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #e0e7ef;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}
.progress-num {
  color: #4f8aff;
  font-size: 28rpx;
  font-weight: bold;
}
.health-card.member {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  align-items: flex-start;
}
.member-avatars {
  display: flex;
  margin-bottom: 8rpx;
}
.member-avatar {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 2rpx solid #fff;
  margin-right: -8rpx;
  background: #eee;
}

.encyclopedia-list {
  margin: 0 24rpx;
  margin-top: 16rpx;
}
.encyclopedia-item {
  background: #fff;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  padding: 20rpx 16rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.encyclopedia-img {
  width: 64rpx;
  height: 64rpx;
  border-radius: 12rpx;
  margin-right: 16rpx;
  background: #f0f0f0;
}
.encyclopedia-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.encyclopedia-title {
  font-size: 26rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 4rpx;
}
.encyclopedia-desc {
  font-size: 22rpx;
  color: #888;
}
</style>